<template>
    <div class="organization-pane">
        <el-row class="search-row">
            <el-col :span="6" style="">组织结构</el-col>
            <el-col :span="18" style="position: relative">
                <el-input placeholder="请输入搜索关键词" v-model="search.searchTxt" size="small"/>
                <el-button :icon="Search" class="search-bn" type="text" @click="searchClick"/>
            </el-col>
        </el-row>
        <el-tree
            ref="organizationTreeRef"
            node-key="id"
            :data="this.$store.state.organization"
            :props="treeProps"
            :highlight-current="true"
            :expand-on-click-node="false"
            :filter-node-method="filterTreeData"
            @node-click="handleNodeClick"
        >
            <template #default="{ node, data }">
                {{node.label}}
            </template>
        </el-tree>
    </div>
</template>

<script>
import {reactive, toRefs, ref} from "vue";
import {CaretRight,Search} from '@element-plus/icons-vue'
import {getCompanyWithDeptList} from "../../../../../network/sys/company";

export default {
    name: "OrganizationPane",
    emits:['search-node'],
    setup(props,{emit}){
        const organizationTreeRef = ref(null);
        const data = reactive({
            search: {
                searchTxt: null,
            },
        })
        const tree = reactive({
            treeProps:{
                value: 'id',
                label: 'name',
                children: 'children',
            }
        })
        const clickEvent = reactive({
            searchClick(){
                organizationTreeRef.value.filter(data.search.searchTxt);
            },
            handleNodeClick(data,node,prop){
                // console.log('data',data)
                // console.log('node',node)
                // console.log('prop',prop)
                let type = node.level===1 ? 0 : 1;//1級菜单是公司，2级菜单是部门。用0表示公司，1表示部门。
                let id = data.id;
                let name = data.name;
                if(node.isLeaf){
                    name = node.parent.data.name + '-' + name;
                }
                console.log('name',name)
                emit('search-node',{type,id,name});
            }
        })
        const executionFn = reactive({
            filterTreeData(keyword,node){
                return node.name.includes(keyword);
            }
        })

        return {
            organizationTreeRef,
            ...toRefs(data),
            ...toRefs(tree),
            ...toRefs(clickEvent),
            ...toRefs(executionFn),
            CaretRight,Search
        }
    },
    data(){
        return{
        }
    },
    methods: {
        init(){
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid;*/
}
.organization-pane{

}
.search-row{
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    /*border: 1px solid red;*/
}
.search-bn{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 7px;
    right: 7px;
}
.el-button--text{
    color: #666666;
}
</style>